<template>
  <!-- <div class="cell_warp"> -->
    <!-- 单条列表 -->
    <!-- <van-cell center title="单元格" label="描述信息" > -->
      <!-- 关闭按钮 -->
      <!-- <template #right-icon> -->
          <!-- <van-icon name="cross"></van-icon> -->
      <!-- </template> -->
    <!-- </van-cell> -->
  <!-- </div> -->

  <!-- 第二种方法：自定义cell的标题和label -->
  <div @click="$router.push(`/detail/${artObj.art_id}`)">
    <!-- 一条文章 -->
    <van-cell>
      <!-- 标题区域的插槽 -->
      <template #title>
        <div class="title-box">
          <!-- 标题 -->
          <span>{{ artObj.title }}</span>
          <!-- 单图 -->
          <!-- <img v-if="artObj.cover.type === 1" :src="artObj.cover.images[0]" alt="" class="thumb"> -->
          <!-- 图片懒加载 -->
          <img v-if="artObj.cover.type === 1" v-lazy="artObj.cover.images[0]" alt="" class="thumb">
        </div>
        <!-- 三图 -->
        <div v-if="artObj.cover.type > 1">
          <img v-for="(str, index) in artObj.cover.images" :key="index" v-lazy="str" class="thumb">
        </div>
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <span>
            {{ artObj.aut_name }} &nbsp;&nbsp;&nbsp;
            {{ artObj.comm_count }}评论 &nbsp;&nbsp;&nbsp;
            {{ $timeTo(artObj.pubdate) }}
          </span>
          <!-- 关闭按钮 -->
          <van-icon name="cross" @click.stop="show = true" v-show="closeShow" />
        </div>
      </template>
    </van-cell>
    <!-- 文章底部的反馈面板  -->
    <!-- 为什么写在这个组件 -->
    <!-- 这个组件文件复制走直接就带反馈面板
      get-container="body" - 设置弹出层, 挂载到哪里 (body上以后可以挡住整个list组件-你也触碰不到了)
 -->
    <van-action-sheet cancel-text="取消" v-model="show" :actions="actions" @select="onSelect"  get-container="body" />
    <!-- :lock-scroll="false" 参数必须加冒号，因为"false"是字符串 -->
  </div>
</template>

<script>
// 时间工具dayjs封装到utils/index.js里了
// import { timeTo } from '@/utils'
export default {
  data () {
    return {
      show: false, // 控制面板的显示和隐藏,默认不显示
      actions: [],
      onActions: [{ name: '不感兴趣' }, { name: '反馈垃圾内容' }, { name: '拉黑作者' }]
    }
  },
  created () {
    this.actions = this.onActions // 默认第一层反馈面板的数据
  },
  props: {
    artObj: Object,
    closeShow: { // 控制 X 是否显示
      type: Boolean,
      default: true // 默认出现
    }
  },
  methods: {
    // timeTo: timeTo,
    onSelect (action, index) { // 反馈面板 -- 选择事件
      // 默认情况下点击选项时不会自动收起，需要将show改为fasle
      // this.show = false
      // 点击显示第二项数据面板内容
      // console.log(action, index) // 参数1 action: 绑定的数据对象 -- {name: '不感兴趣'} 参数2 index:索引
      if (action.name === '反馈垃圾内容') {
        // 切换数据源/显示隐藏另外一套actionsSheet
        this.actions = [
          {
            value: -1, // 点击返回 到原来那套数据
            name: '返回'
          },
          {
            value: 0,
            name: '其它问题'
          },
          {
            value: 1,
            name: '标题夸张'
          },
          {
            value: 2,
            name: '低俗色情'
          },
          {
            value: 3,
            name: '错别字多'
          },
          {
            value: 4,
            name: '旧闻重复'
          },
          {
            value: 6,
            name: '内容不实'
          },
          {
            value: 8,
            name: '侵权'
          },
          {
            value: 5,
            name: '广告软文'
          },
          {
            value: 7,
            name: '涉嫌违法犯罪'
          }
        ]
      } else if (action.name === '返回') {
        this.actions = this.onActions // 点击返回，回到第一层面板
      } else { // 其他选项都是删除文章，所以不用判断action.name值了
        // 删除文章  文章数据在index.vue页面需要在这里执行删除操作，需要把文章id传给index.vue(子传父)；文章id在这个组件的子组件ArticleList中，在ArticleList把文章id传到本组件中(ArticleItem),也是子传父
        this.$emit('removeArt', this.artObj.art_id, action.value) // action.value 举报类型
      }
    }
  }
}
</script>

<style scoped lang="less">
  // .cell_warp /deep/ .van-icon-cross {
  //     align-self: flex-end;
  //     padding-bottom: 3px;
  // }

  /* 方式2：自定义cell的标题和label */
  .title-box { // 标题样式
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .label-box { // label描述样式
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .thumb {
    // 矩形黄金比例：0.618
    width: 113px;
    height: 70px;
    background-color: #f8f8f8;
    object-fit: cover;
  }

  .thumb-box {
    display: flex;
    justify-content: space-between;
  }
</style>
